<template>
  <div ref="chartRef" style="width: 100%; height: 300px"></div>
</template>

<script setup>
import * as echarts from 'echarts'
import { getTrendStatistics } from '@/api/statistics'

const chartRef = ref(null)
let myChart = null

const trendStats = ref({
  checkInTrend: [],
  checkOutTrend: []
})

/* 获取趋势数据 */
function getTrendStats() {
  getTrendStatistics().then(res => {
    if (res.code === 200) {
      trendStats.value = res.data
      initChart()
    }
  })
}

/* 格式化日期 */
function formatDate(dateStr) {
  const date = new Date(dateStr)
  return `${date.getMonth() + 1}/${date.getDate()}`
}

/* 初始化图表 */
function initChart() {
  const option = {
    tooltip: {
      trigger: 'axis',
      backgroundColor: 'rgba(255, 255, 255, 0.9)',
      borderColor: '#eee',
      borderWidth: 1,
      textStyle: {
        color: '#333'
      },
      formatter: function(params) {
        let result = `${params[0].axisValue}<br/>`
        params.forEach(item => {
          result += `${item.marker} ${item.seriesName}：${item.value}间<br/>`
        })
        return result
      }
    },
    legend: {
      data: ['入住', '退房'],
      right: '5%',
      icon: 'circle'
    },
    grid: {
      top: '50px',
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: trendStats.value.checkInTrend.map(item => formatDate(item.date)),
      axisLine: {
        lineStyle: {
          color: '#ddd'
        }
      },
      axisTick: {
        show: false
      }
    },
    yAxis: {
      type: 'value',
      minInterval: 1,
      splitLine: {
        lineStyle: {
          type: 'dashed',
          color: '#eee'
        }
      },
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      }
    },
    series: [
      {
        name: '入住',
        type: 'line',
        smooth: true,
        symbol: 'circle',
        symbolSize: 8,
        itemStyle: {
          color: '#67C23A',
          borderWidth: 2,
          borderColor: '#fff'
        },
        lineStyle: {
          width: 3,
          shadowColor: 'rgba(103,194,58,0.3)',
          shadowBlur: 10,
          shadowOffsetY: 5
        },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: 'rgba(103,194,58,0.3)' },
            { offset: 1, color: 'rgba(103,194,58,0.1)' }
          ])
        },
        data: trendStats.value.checkInTrend.map(item => item.count)
      },
      {
        name: '退房',
        type: 'line',
        smooth: true,
        symbol: 'circle',
        symbolSize: 8,
        itemStyle: {
          color: '#F56C6C',
          borderWidth: 2,
          borderColor: '#fff'
        },
        lineStyle: {
          width: 3,
          shadowColor: 'rgba(245,108,108,0.3)',
          shadowBlur: 10,
          shadowOffsetY: 5
        },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: 'rgba(245,108,108,0.3)' },
            { offset: 1, color: 'rgba(245,108,108,0.1)' }
          ])
        },
        data: trendStats.value.checkOutTrend.map(item => item.count)
      }
    ]
  }

  myChart.setOption(option)
}

onMounted(() => {
  myChart = echarts.init(chartRef.value)
  getTrendStats()
  
  window.addEventListener('resize', () => {
    myChart.resize()
  })
})

onUnmounted(() => {
  if (myChart) {
    myChart.dispose()
  }
  window.removeEventListener('resize', () => {
    myChart.resize()
  })
})
</script>
